<extend name="Extends/base" />
<block name="title">提交任务</block>
<block name="css">
</block>
<block name="body_style">class="bgc-fff"</block>
<block name="body">
    <div class="c-main">
        <div class="plr15">
            <ul class="mb10 phone-list">
                <h2 class="phone-title">提交任务</h2>
                <li class="ptb10">
                    <div class="phone-list-txt width-30"><i>*</i>手机号码</div>
                    <div class="phone-list-num c-position-r">
                        <if condition="$info['state'] eq 1 or $info['state'] eq -2 ">
                            <input type="text" name="phone" value="{$info['phone']?$info['phone']:$userInfo['phone']}"
                                placeholder="请输入您的手机号码" class="width-100 phone-input" />
                            <div class="phone-clear"></div>
                            <else />
                            {$info.phone}
                        </if>
                    </div>
                </li>
                <li class="ptb10">
                    <div class="phone-list-txt width-30"><i>*</i>时间</div>
                    <div class="phone-list-num c-position-r">
                        <if condition="$info['state'] eq 1 or $info['state'] eq -2 ">
                            <input type="text" name="doing_time" value="{:date('Y-m-d',strtotime($info['doing_time']))}"
                                data-val="date" placeholder="截图时间" class="width-100 phone-input" />
                            <else />
                            {:date('Y-m-d',strtotime($info['doing_time']))}
                        </if>
                    </div>
                </li>
            </ul>
            <p class="phone-tip">提示：为保证您的资金权益，我们需要对您上传的凭证进行审核，核实是您本人操作，审核需要2-3天，请耐心等待。</p>

        </div>
        <div class="sc-box plr15">
            <h3>上传截图</h3>
            <p class="phone-tip">注意：请按照左边的示例上传，微信双开可能导致无法上传图片。</p>
        </div>
        <div class="sc-imgbox mt20">
            <ul id="taskProof" class="sc-imgbox-list clearfix c-photohold">
                <volist name="info[proof]" id="vo">
                    <li>
                        <img src="{$vo}" data-src="{$vo}" class="c-photoswipe">
                        <if condition="$info['state'] eq 1  or $info['state'] eq -2 ">
                            <i class="sc-del"></i>
                        </if>
                    </li>
                </volist>
                <if condition="$info['state'] eq 1  or $info['state'] eq -2 ">
                    <li class="pz-img"></li>
                </if>
            </ul>
        </div>
        <div class="plr15">
            <if condition="$info['state'] eq 1  or $info['state'] eq -2 ">
                <a href="javascript:;" class="sc-btn ">
                    {$info['state']==1?"确认上传":"重新提交审核"}
                </a>
                <else />
                <a href="javascript:;" class="sc-btn disabled" style="background: #9093a0">
                    <switch name="info.state">
                        <case value="2">完成待审核</case>
                        <case value="3">任务已完成</case>
                        <default />
                    </switch>
                </a>
            </if>
        </div>
    </div>
    <include file="Join/addProofHintPop" />
</block>
<block name="js">
    <script type="text/javascript" src="__APPS__/js/api.js?v={:C('JS_CSS_VERSION')}"></script>
    <link rel="stylesheet" href="__APPS__/widget/photoswiper/css/photoswipe.css?v={:C('JS_CSS_VERSION')}" />
    <script type="text/javascript" src="__APPS__/widget/photoswiper/js/photoswipe.js?v={:C('JS_CSS_VERSION')}"></script>

    <link rel="stylesheet" href="__APPS__/widget/mobiscroll/2.17.1/css/mobiscroll.css?v={:C('JS_CSS_VERSION')}" />
    <script src="__APPS__/widget/mobiscroll/2.17.1/js/mobiscroll.min.js?v={:C('JS_CSS_VERSION')}"></script>

    <!--微信js引用-->
    <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

    <script type="text/javascript">
        var taskId = "{$taskId}";
        var wxConf = $.parseJSON('{:json_encode($conf)}');
        $(function () {
            // wxConf.debug = true;
            wxConf.jsApiList = ['chooseImage', 'previewImage', 'uploadImage'];
            wx.config(wxConf);
            wx.error(function (res) {
                $.toast("微信异常" + res.errMsg);
            });

            //初始化时间控件
            $('input[data-val=date]').mobiscroll({
                preset: 'date',
                theme: 'ios',
                lang: 'zh'
            });
        });


        $('.phone-clear').on("click", function () {
            $('input[name=phone]').val("");
        });

        $('.sc-btn').on('click', function () {
            if ($(this).hasClass('disabled')) {
                return false;
            }
            addProofHintPopShow();
        });

        //删除图片
        $('.c-main').on('click', '.sc-del', function () {
            $(this).parent().remove();
        });

        //上传图片
        $('.c-main').on('click', '.pz-img', function () {
            //对接微信sdk
            var $t = $(this);
            wx.chooseImage({
                "count": 1,
                "sizeType": ['compressed'],
                "success": function (res) {
                    var localIds = res.localIds[0];
                    wx.uploadImage({
                        localId: localIds,
                        isShowProgressTips: 1,
                        success: function (res) {
                            var html = '<li><img data-src="' + res.serverId +
                                '" src="' +
                                localIds +
                                '" class="c-photoswipe"><i class="sc-del"></i></li>';
                            $t.before(html);
                        }
                    });

                }
            });
        });

        $('#addProofHintPop .xq-ok').on('click', function () {
            var phone = $('input[name=phone]').val();
            var doingTime = $('input[name=doing_time]').val();
            var proof = [];
            $('#taskProof img').each(function () {
                proof.push($(this).attr('data-src'));
            });

            var data = {
                "phone": phone,
                "doing_time": doingTime,
                "proof": proof
            }

            doFinishJoinTask(taskId, data, function (res) {
                if (res.Code != 10000) {
                    $.toast(res.Message);
                    return false;
                }

                $.toast("提交成功", 1000, function () {
                    location.reload();
                });
            });

        });

        //关闭弹窗
        $('#addProofHintMaskr,#addProofHintPop .xq-close,#addProofHintPop .xq-cancel').on('click', function () {
            addProofHintPopHide();
        });

        /**
         * 添加证明弹窗显示
         */
        function addProofHintPopShow() {
            $('#addProofHintMaskr,#addProofHintPop').show();
        }

        /**
         * 添加证明弹窗隐藏
         */
        function addProofHintPopHide() {
            $('#addProofHintMaskr,#addProofHintPop').hide();
        }
    </script>
</block>